<ion-header no-border>
  <ion-navbar>
  </ion-navbar>
</ion-header>

<ion-content no-bounce>
  <div class="bitpayCard-header">
    <div class="bitpayCard-header-title">
      <span translate>Fund it.</span>
      <br>
      <span translate>Spend it.</span>
      <br>
      <span translate>Live on crypto.</span>
    </div>
    <div class="bitpayCard-header-img">
      <img src="assets/img/bitpay-card/bitpay-card-mc-angled.svg" />
    </div>
  </div>
  <div class="bitpayCard-content">
      <div>
      <p translate>The fastest, easiest way to turn your crypto into dollars for shopping. Load funds in the BitPay App and spend in minutes.</p>
    </div>
    <div class="bitpayCard-items-container">
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/icon-instant-reloads.svg" />
          <div class="bitpayCard-item-title" translate>Instant Reloads*</div>
        </div>
        <p>
        <span translate>Reload your balance with no conversion fees*.</span>
        Powered by our competitive <a (click)="openExchangeRates()">exchange rates</a>.
        </p>
      </div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/icon-flexibility.svg" />
          <div class="bitpayCard-item-title" translate>Flexibility</div>
        </div>
        <p translate>View your balance, request a new PIN, and reload instantly all within the BitPay App.</p>
      </div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/icon-enhanced-security.svg" />
          <div class="bitpayCard-item-title" translate>Enhanced Security</div>
        </div>
        <p translate>Includes EMV chip and options to lock your card and control how you spend.</p>
      </div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/icon-worldwide.svg" />
          <div class="bitpayCard-item-title" translate>Worldwide</div>
        </div>
        <p translate>Ready to use in millions of locations around the world with contactless payment, PIN, Google Pay, Apple Pay, or by simply withdrawing cash from any compatible ATM*.</p>
      </div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/icon-worldwide.svg" />
          <div class="bitpayCard-item-title" translate>Earn cash</div>
        </div>
        <p translate>Refer friends and you’ll each receive $10 when they load their first $100.</p>
      </div>
      
    </div>
      <div>
        <p translate>Shop online or in stores instantly with the virtual BitPay Prepaid Mastercard©, or order your physical card for free today.</p>
      </div>
      <div class="bitpayCard__agreement">
        *Network fees and miner fees may apply.<br>
        *Third party fees may apply.<br><br>
        BY USING THIS CARD YOU AGREE WITH THE TERMS AND CONDITIONS OF THE CARDHOLDER AGREEMENT AND FEE SCHEDULE, IF ANY.  The BitPay Prepaid Mastercard is issued by Metropolitan Commercial Bank (Member FDIC) pursuant to a license from Mastercard International. “Metropolitan Commercial Bank” and “Metropolitan” are registered trademarks of Metropolitan Commercial Bank ©2014.<br><br>
        Mastercard is a registered trademark and the circles design is a trademark of Mastercard International Incorporated.
      </div>

  </div>
</ion-content>

  <ion-footer *ngIf="ready">
    <ion-toolbar>

      <ng-container *ngIf="bitPayIdConnected else notConnected">
        <button ion-button class="button-standard button-primary" (click)="orderBitPayCard('login')">
          {{'Sign Up' | translate}}
        </button>
      </ng-container>

      <ng-template #notConnected>
        <button ion-button class="button-standard button-primary" (click)="orderBitPayCard('createAccount')">
          {{'Sign Up' | translate}}
        </button>
        <div class="bitpayCard__link-button" (click)="orderBitPayCard('login')">
          {{'I already have an account' | translate}}
        </div>
      </ng-template>

    </ion-toolbar>
  </ion-footer>
